<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="no" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="../css/shop.css"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_968061_8l2un2xh11c.css"/>
    <title>商场列表页</title>
</head>
<body>
<section class="banner">
<div class="bai" flex="main:center cross:center">
    <i class="iconfont icon-sousuo"></i>
    <input type="text" placeholder="请输入关键词进行搜索" class="sousuo">
</div>
</section>
<section class="f1">
    <ul class="list" flex>
        <li flex="main:center cross:center dir:top">
            <div class="yuan" flex="main:center cross:center">
                <i class="iconfont icon-tianchongxing-"></i>
            </div>
            <p>随便写的</p>
        </li>
        <li flex="main:center cross:center dir:top">
            <div class="yuan2" flex="main:center cross:center ">
                <i class="iconfont icon-icon-test"></i>
            </div>
            <p>坚果炒货</p>
        </li>
        <li flex="main:center cross:center dir:top">
            <div class="yuan3" flex="main:center cross:center">
                <i class="iconfont icon-shaguo"></i>
            </div>
            <p>果干蜜饯</p>
        </li>
        <li flex="main:center cross:center dir:top">
        <div class="yuan4" flex="main:center cross:center">
            <i class="iconfont icon-chahu"></i>
        </div>
        <p>果干蜜饯</p>
    </li>
    </ul>
        <ul class="list2" flex>
            <li flex="main:center cross:center dir:top">
                <div class="yuan5" flex="main:center cross:center">
                    <i class="iconfont icon-qiandai"></i>
                </div>
                <p>糖果糕点</p>
            </li>
            <li flex="main:center cross:center dir:top">
                <div class="yuan6" flex="main:center cross:center">
                    <i class="iconfont icon-pingzi"></i>
                </div>
                <p>五谷杂粮</p>
            </li>
            <li flex="main:center cross:center dir:top">
                <div class="yuan7" flex="main:center cross:center">
                    <i class="iconfont icon-penzai-shi"></i>
                </div>
                <p>饼干膨化</p>
            </li>
            <li flex="main:center cross:center dir:top">
                <div class="yuan8" flex="main:center cross:center">
                    <i class="iconfont icon-leimupinleifenleileibie"></i>
                </div>
                <p>优惠专区</p>
                <div class="bai40" flex="main:center cross:center">
                    -40%
                </div>
            </li>

    </ul>

</section>
<section class="banner2">
    <img src="../img/2.png">
</section>
<section class="f2">
    <ul class="list3" flex>
        <li>
            <div flex="cross:center">
            <p class="p1">优惠卷</p>
            <div class="kuan" flex="cross:center main:center">限时领取</div>
            </div>
            <p class="p2">刷新超低折扣价</p>
        <div flex="main:justify cross:center">
            <img src="../img/3.png">
            <img src="../img/4.png">
            <div class="bai50" flex="main:center cross:center">-50￥</div>
        </div>
        </li>
        <li>
            <div flex="cross:center">
                <p class="p1">限时抢购</p>
                <div class="kuan" flex="cross:center main:center">售完为止</div>
            </div>
            <p class="p3">打破电商价格壁垒</p>
            <div flex="main:justify cross:center">
                <img src="../img/5.png">
                <img src="../img/6.png">
            </div>
        </li>
    </ul>
    <ul class="list4" flex>
        <li flex="cross:center main:justify">
            <div>
                <p class="p4">农庄有趣</p>
                <p class="p5">当季蔬果抢鲜</p>
            </div>
            <img src="../img/7.png">
        </li>
        <li flex="cross:center main:justify">
            <div>
                <p class="p4">积分兑换</p>
                <p class="p5">免费领好物</p>
            </div>
            <img src="../img/8.png">
        </li>

    </ul>
    <ul class="list4" flex>
        <li flex="cross:center main:justify">
            <div>
                <p class="p4">一元拼团</p>
                <p class="p5">拼团享低价</p>
            </div>
            <img src="../img/8.png">
        </li>
        <li flex="cross:center main:justify">
            <div>
                <p class="p4">七折直销</p>
                <p class="p5">买到就是赚到</p>
            </div>
            <img src="../img/9.png">
        </li>

    </ul>

</section>
<section class="f3" flex="cross:center">
    <img src="../img/luntang.png">
    <div >
        <div class="re" flex="cross:center">
        <div class="reping" flex="main:center cross:center">热评</div>
        <a href="#">风味熟食-就爱这肉感！即食原味麻辣香辣牛香辣牛</a>
        </div>
        <div flex="cross:center">
            <div class="reping" flex="main:center cross:center">热评</div>
            <a href="#">峰巢蜜蜂蜜天然野生蜂巢盒装纯农家自产新农家自产新</a>
        </div>
    </div>

</section>
<section class="f4">
   <div class="shiping"></div>
</section>
<section class="f5">
    <div class="f5-1" flex="cross:center">
        <div class="sekuai"></div>
        <span>掌柜推荐</span>
        <a href="#">High quality recommendation</a>
    </div>
    <ul class="list5" flex>
        <li flex="cross:center main:justify">
            <img src="../img/12.png">
            <div class="zhong">
                <p class="p6">原生态野百花蜜</p>
                <p class="p7">森农良品</p>
                <p class="p8">福建连城特产美食</p>
            </div>

        </li>
        <li flex="cross:center main:justify">
            <img src="../img/13.png">
            <div class="zhong">
                <p class="p6">原生态野百花蜜</p>
                <p class="p7">森农良品</p>
                <p class="p8">福建连城特产美食</p>
            </div>

        </li>

    </ul>
    <ul class="list6" flex>
        <li>
            <div>
                <p class="p9">东北野生猴头菇</p>
                <p class="p10">健康美味干货</p>
            </div>
            <div flex="main:justify cross:center">
                <img src="../img/14.png">
                <img src="../img/15.png">
            </div>
        </li>
        <li>
            <div>
                <p class="p9">特产黑木耳干货</p>
                <p class="p7">农家自产</p>
            </div>
            <div flex="main:justify cross:center">
                <img src="../img/16.png">
                <img src="../img/17.png">
            </div>
        </li>
    </ul>
    <ul class="list6" flex>
        <li>
            <div>
                <p class="p9">农家豆干</p>
                <p class="p7">漳平特产</p>
            </div>
            <div flex="main:justify cross:center">
                <img src="../img/18.png">
                <img src="../img/19.png">
            </div>
        </li>
        <li>
            <div>
                <p class="p9">草菇食用菌</p>
                <p class="p7">个大肉厚</p>
            </div>
            <div flex="main:justify cross:center">
                <img src="../img/20.png">
                <img src="../img/21.png">
            </div>
        </li>
    </ul>
</section>
<section class="f6">
    <div class="f5-1" flex="cross:center">
        <div class="sekuai"></div>
        <span>热销排行</span>
        <a href="#">Top selling</a>
    </div>
    <ul class="list6" flex>
        <li>
            <div>
                <p class="p9">大井头青豆腐竹</p>
                <p class="p7">健康美味干货</p>
            </div>
            <div flex="main:justify cross:center">
                <img src="../img/22.png" id="img1">
                <img src="../img/23.png">
            </div>
        </li>
        <li>
            <div>
                <p class="p9">秘制辣猪肉条</p>
                <p class="p7">美味香辣</p>
            </div>
            <div flex="main:justify cross:center">
                <img src="../img/24.png">
                <img src="../img/25.png">
            </div>
        </li>
    </ul>
    <ul class="list6" flex>
        <li>
            <div>
                <p class="p9">客家炒米粉</p>
                <p class="p7">手工米线</p>
            </div>
            <div flex="main:justify cross:center">
                <img src="../img/26.png">
                <img src="../img/27.png">
            </div>
        </li>
        <li>
            <div>
                <p class="p9">麻辣香辣牛肉丝</p>
                <p class="p7">龙岩特产</p>
            </div>
            <div flex="main:justify cross:center">
                <img src="../img/28.png">
                <img src="../img/29.png">
            </div>
        </li>
    </ul>
</section>

<footer>
        <ul class="list0" flex>
            <li flex="main:center cross:center dir:top">
                <i class="iconfont icon-home"></i>
                <p>首页</p>
            </li>
            <li flex="main:center cross:center dir:top">
                <i class="iconfont icon-fenlei1"></i>
                <p>分类</p>
            </li>
            <li flex="main:center cross:center dir:top">
                <i class="iconfont icon-gouwuche"></i>
                <p>购物车</p>
            </li>
            <li flex="main:center cross:center dir:top">
                <i class="iconfont icon-geren"></i>
                <p>个人中心</p>
            </li>
        </ul>
</footer>

</body>
</html>